<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据看板演示01</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/icomoon.css">
</head>
 
<body>
    <div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>30100</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            渠道总数
                        </span>
                    </div>
                    <div class="item">
                        <h4>410</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            自营渠道
                        </span>
                    </div>
                    <div class="item">
                        <h4>15980</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            合作渠道
                        </span>
                    </div>
                    <div class="item">
                        <h4>14321</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            零售渠道
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">异常渠道监控</a>
                        <a href="javascript:;" data-index="1">新增渠道监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">监控月份</span>
                            <span class="col">渠道名称</span>
                            <span class="col">异常类型</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00001</span>
                                    <span class="col">零销量</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00002</span>
                                    <span class="col">流失</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00003</span>
                                    <span class="col">零销量</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00004</span>
                                    <span class="col">流失</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00005</span>
                                    <span class="col">零销量</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00006</span>
                                    <span class="col">流失</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">监控时间</span>
                            <span class="col">渠道名称</span>
                            <span class="col">销量概况</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00001</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00002</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00003</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00004</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00005</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">202203</span>
                                    <span class="col">江苏省XX市XX县XX镇测试渠道00006</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>渠道分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>30100</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    渠道总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
		
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    渠道数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全省用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>XXXXXX</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>XXX</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
		
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>XXXXXXXX</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4>XXXXXXXXXXX</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额(万元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    商圈
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    次商圈
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    乡镇
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    农村
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">xx<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>xxxx</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全省热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                套餐1
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                套餐2
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                套餐3
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各市热销 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>苏州</span>
                                    <span>xxxxx <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>南京</span>
                                    <span>xxxx <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>无锡</span>
                                    <span>xxx <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>南通</span>
                                    <span>xxx <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>徐州</span>
                                    <span>xxx <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="js/index.js"></script>
 
<script src="js/china.js"></script>
<script src="js/mymap.js"></script>
 
</html>
